<template>
  <t-card class="dashboard-cat" size="small">
    <t-loading dot tip="数据加载中..." :loading="loading">
      <div class="header">
        <t-space>
          <t-select v-model="activeKey" allow-search>
            <t-option v-for="tab in tabs" :key="tab.key" :value="tab.key">
              {{ tab.title }}
            </t-option>
          </t-select>
          <t-select v-if="needIndex" v-model="index" allow-search allow-clear>
            <t-option v-for="idx in indices" :key="idx" :value="idx">{{ idx }}</t-option>
          </t-select>
        </t-space>
        <div>
          <t-tooltip content="跳转到高级查询" position="br">
            <t-button variant="text" theme="primary" shape="square" @click="jumpTo()">
              <template #icon>
                <filter-icon />
              </template>
            </t-button>
          </t-tooltip>
          <t-button
            variant="text"
            theme="primary"
            shape="square"
            :loading="loading"
            @click="refresh()"
          >
            <template #icon>
              <refresh-icon />
            </template>
          </t-button>
        </div>
      </div>
      <t-table :columns="columns" :data="records" :height="virtualListHeight" />
    </t-loading>
  </t-card>
</template>
<script lang="ts" setup>
import { computed, ref, watch } from "vue";
import { TableColumnData, TableData } from "@arco-design/web-vue";
import { useWindowSize } from "@vueuse/core";
import { cat, tabs } from "@/page/dashboard/Cat/func";
import MessageUtil from "@/utils/model/MessageUtil";
import { useIndexStore, useUrlStore } from "@/store";
import { useSeniorSearchStore } from "@/store/components/SeniorSearchStore";
import { useRouter } from "vue-router";
import PageNameEnum from "@/enumeration/PageNameEnum";
import { FilterIcon, RefreshIcon } from "tdesign-icons-vue-next";

const size = useWindowSize();
const router = useRouter();

const loading = ref(false);

const activeKey = ref("/_cat/allocation?v");
const index = ref("");

const columns = ref(new Array<TableColumnData>());
const records = ref(new Array<TableData>());

const virtualListHeight = computed(() => size.height.value - 124);
const indices = computed(() => useIndexStore().indices.map((e) => e.name));
const needIndex = computed(() => activeKey.value.indexOf("{index}") > -1);

watch(
  () => activeKey.value,
  (key) => handler(key),
  { immediate: true }
);
watch(() => index.value, refresh);

watch(() => useUrlStore().current, refresh);

function refresh() {
  handler(activeKey.value);
}

function handler(url: string) {
  // 清空数据
  columns.value = new Array<TableColumnData>();
  records.value = new Array<TableData>();
  // 未选择链接不处理
  if (useUrlStore().current.trim() === "") {
    return;
  }
  // 需要索引，但是没选择
  if (needIndex.value) {
    if (index.value === "") {
      return;
    } else {
      url = url.replace("{index}", index.value);
    }
  }
  loading.value = true;
  cat(url)
    .then((data) => {
      columns.value = data.columns;
      records.value = data.records;
    })
    .catch((e) => MessageUtil.error("获取数据失败！", e))
    .finally(() => (loading.value = false));
}

function jumpTo() {
  router.push(PageNameEnum.SENIOR_SEARCH);
  useSeniorSearchStore().loadEvent({
    method: "GET",
    link: activeKey.value,
    body: ""
  });
}
</script>
<style scoped lang="less">
.dashboard-cat {
  margin: 8px;

  .header {
    display: flex;
    justify-content: space-between;
    padding: 7px 0;
  }
}
</style>
